$(document).ready(function(){

   var sWidth = $('#pic1').width();
   var len = $('#pic1 .sildebar li').length;
   var timer;
   var index = 0;

    var focusBox = '<ul class="focusBox clearfix"></ul>';
    $('#pic1').append(focusBox);

   for(var i=0;i<len;i++){
    var li = document.createElement('li');
      $('.focusBox')[0].appendChild(li);
   }

   $('#pic1 a.next').click(function(){
    index +=1;
    if(index == len){index=0}
    showPic(index);
   });

    $('#pic1 a.prev').click(function(){
        index -=1;
        if(index == -1){index=len-1}
        showPic(index);
    });


    $('#pic1').live({
    mouseenter:function(){
      $('#pic1 a.prev,#pic1 a.next').animate({"opacity":0.6},1000);
    },
    mouseleave:function(){
      $('#pic1 a.prev,#pic1 a.next').animate({"opacity":0.6},1000);
    }
   });


  
   $('#pic1 .focusBox li').click(function(){
    index = $('#pic1 .focusBox li').index(this);
    showPic(index);
   }).eq(0).trigger('click');
   
   $('#pic1 .sildebar').css("width",sWidth * (len));

   $('#pic1').hover(function(){
    clearInterval(timer);
      },function(){
      timer = setInterval(function(){
      showPic(index);
      index++;
      if(index == len){index = 0;}
          },3000);
   }).trigger('mouseleave');

   function showPic(index){
    var nowLeft = -index * sWidth;
    $('#pic1 .sildebar').stop(true,false).animate({left:nowLeft},500);
    $('#pic1 .focusBox li').removeClass('cur').eq(index).addClass('cur');
   }

});

